<template>
  <div class="tab">
    <header>
      <div class="left">
        <div
          v-for="(item,index) in tabConfig"
          :key="index"
          :class="{activeTab:currentIndex === index}"
          @click="currentIndex = index"
        >{{item}}</div>
      </div>
      <div class="right"></div>
    </header>
    <footer>
      <slot></slot>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, defineExpose } from 'vue'
const props = defineProps({
  tabConfig: {
    type: Array,
    default: () => []
  }
})
const currentIndex = ref(0)
defineExpose({ currentIndex: currentIndex })
</script>

<style lang="scss">
.tab {
  header {
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    .left {
      display: flex;
      height: 40px;
      align-items: center;
      border-bottom: 1px solid #303030;
      div {
        box-sizing: border-box;
        margin: 0px 16px;
        padding: 8px 0;
        font-weight: bold;
        font-size: 14px;
        color: #b2b2b2;
        border-bottom: 2px solid #252525;
        &:hover {
          cursor: pointer;
          color: #fff;
        }
      }
    }
  }
}
.activeTab {
  border-bottom: 2px solid #a9342d !important;
  color: #a9342d !important;
}
</style>